<template>
  <div class="register">
    <CommonHeader title="欢迎注册">
      <template #left>
        <div class="back-icon">
          <Icon name="zuojiantou" />
          <span>返回</span>
        </div>
      </template>
    </CommonHeader>
    <!-- 注册内容 -->
    <div class="register_content">
      <form action="" @submit.prevent>
        <div class="form_item" v-verify="'phone'">
          <label for="">手机号:</label>
          <input type="text" v-model="form.phone" placeholder="请输入手机号" />
        </div>
        <div class="form_item">
          <label for="">昵称:</label>
          <input type="text" v-model="form.nickname" placeholder="请输入昵称" />
        </div>
        <div class="form_item" v-verify="'password'">
          <label for="">密码:</label>
          <input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </div>
        <div class="form_item">
          <button @click="handleRegister">点击注册</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/common/publicHeader/index.vue';
import { registerAPI } from '@/api/register';
import Message from '@/utils/message.js';
import Toast from '@/utils/toast.js';

export default {
  name: 'register',
  data() {
    return {
      form: {
        phone: '',
        nickname: '',
        password: '',
      },
    };
  },

  components: {
    CommonHeader,
  },
  methods: {
    // 点击注册
    async handleRegister() {
      // 判断手机号是否为空
      if (!this.form.phone) {
        return Toast('请输入手机号');
      }
      // 判断手机号格式对吗如果不对不能进行下一步
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        return Toast('请输入正确的手机号');
      }
      // 判断密码是否为空
      if (!this.form.password) {
        return Toast('请输入密码');
      }
      // 如果密码长度小于6位不能进行下一步
      if (this.form.password.length < 6) {
        return Toast('密码长度不能小于6位');
      }
      // 判断昵称是否为空
      if (!this.form.nickname) {
        return Toast('请输入昵称');
      }
      try {
        const res = await registerAPI(this.form);
        if (res.code === 200) {
          Message.success(res.msg);

          this.$router.push({
            name: 'login',
          });
        } else {
          Message.error('当前账号已注册');
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  .register_content {
    padding: 20px;
    background-color: #fff;
    margin: 10px;

    form {
      .form_item {
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        &:last-child {
          border-bottom: none;
        }

        label {
          display: block;
          width: 80px;
          margin-bottom: 5px;
          font-size: 14px;
        }

        input {
          width: 100%;
          height: 40px;
          padding: 0 10px;
          box-sizing: border-box;
        }

        button {
          width: 100%;
          height: 40px;
          background-color: #ff6140;
          color: #fff;
          border: none;
          border-radius: 5px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
